<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form divClass" v-if="headerShow">
                <div>
                    <a-form :model="queryData" size="small" layout="inline">
                        <a-form-item label="工艺单号">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="queryData.planTechnologyCode" @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="排产号">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="queryData.schedulCode" @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="坯布编号">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="queryData.greyCode" @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="坯布名称">
                            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                                v-model="queryData.greyName" @press-enter="huiche" />
                        </a-form-item>
                    </a-form>
                </div>
                <div class="my-tool-bar">
                    <Toolbar :style="{ width: '200px' }" :items="[
                        `${permissionStore.hasPermisson('gyd.cx') ? '查询' : ''}`,
                        `${permissionStore.hasPermisson('gyd.dygyd') ? '打印工艺单' : ''}`]" @printGy="printGys"
                        @select="cx" @dyBoufei="dyBf" @del="dels">
                    </Toolbar>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
            <!-- <a-tabs   :justify="true">
                <a-tab-pane> -->
            <!-- <a-table size="mini" @page-change="pagination.change" :scrollbar="true" sticky-header
                        style="height:100%" stripe :bordered="true" :columns="tableColumns"
                        v-model:selected-keys="selectedRowKeys" :loading="table.tableLoading" :data="table.dataList"
                        :pagination="false" :rowKey="rowKey">
                        <template #drawnNeedleState="{ record }">
                            {{ record.drawnNeedleState == 1 ? '抽针' : '圆筒' }}
                        </template>
                    </a-table> -->
            <a-spin :loading="queryData.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :localeText="localeText1" rowSelection="multiple"
                    @grid-ready="gridReady" style="height:100%" :defaultColDef="defaultColDef" class='ag-theme-alpine'
                    :rowData="table.dataList" :columnDefs="tc">
                </AgGridVuesCopys>
            </a-spin>
            <!-- </a-tab-pane>
            </a-tabs> -->
        </template>
        <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
            @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="pagination.pageSize"
            :current="pagination.page" />

        <a-drawer style="z-index:999" popup-container=".main-base-style" :drawer-style="{ 'zIndex': 999 }" @cancel="gydNo"
            :width="'100%'" :height="'98%'" :visible="gyList.showAdd" placement="bottom" @ok="gydOk" ok-text='保存'
            cancel-text='关闭'>
            <template #title>
                织造工艺单
            </template>
            <a-form ref="formRefs" :model="dataFormsz" size="mini" layout="horizontal">
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item label="工艺单号" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormsz.planTechnologyCode" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="排产号" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormsz.schedulCode" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="重量" label-col-flex="150px">
                            <a-input class="bacClass" disabled v-model="dataFormsz.alreadyWeight"
                                :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="计划单号" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormsz.planOrderCode" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item label="计划单重量" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormsz.orderWeight" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="坯布编号" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormsz.greyCode" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="坯布名称" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormsz.greyName" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="门幅" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormsz.width" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item label="克重" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormsz.weight" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="车间" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormsz.workshop" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="机台号" field="machineCode" label-col-flex="150px"
                            :rules="[{ required: true, message: '必填' }]" :validate-trigger="['change', 'blur']">
                            <a-input disabled class="bacClass" v-model="dataFormsz.machineCode"
                                :style="{ width: '200px' }" />
                            <!-- <a-select popup-container="html"  class="bacClass" allow-clear allow-search v-model="dataFormsz.machineCode"
                            @change="macChanges">
                            <a-option v-for="item in machineList">{{ item }}</a-option>
                        </a-select> -->
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <a-form ref="formRef" :model="dataFormszs" size="mini" layout="horizontal">
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item label="机速" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.machineSpeed" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="争分食" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.compete" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="布架活动胶" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.greyGlue" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="卷布张力" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.greyTension" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item label="布架幅度" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.clothRackWidth" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="筒高" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.needleHigh" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="下机克重" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.machineGWeight" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="坯布洗后克重" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.washGWeight" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item label="坯布洗后封度" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.washSeal" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="毛高" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.furHigh" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="纱线张力" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.yarnTension" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="针筒" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.workDrum" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item label="珠地边" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.beadJuggle" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="总针数" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.sumNeedleCount" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="坯布洗后丛密CPI" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.densityCPI" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="坯布洗后横密WPI" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.densityWPI" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item label="纱长" field="code" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.yarnLong" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="织针型号" label-col-flex="150px">
                            <a-input class="bacClass" v-model="dataFormszs.needleType" :style="{ width: '200px' }" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <a-tabs   :lazy-load="true">
                <a-tab-pane title="纱支结构" key="1">
                    <a-table :bordered="{ cell: true }" :scrollbar="true" sticky-header :columns="columns" :data="dataYuls"
                        :pagination="false" />
                </a-tab-pane>
                <a-tab-pane title="排针" key="2">
                    <div style="width:100%;overflow:auto">
                        <div style="margin: 10px auto;">
                            <span>上排</span>
                            <a-space>
                                <input disabled size="mini" v-for="(item, index) in zzpzdata" :key="index"
                                    style="width: 80px;" v-model="item.upBasin" />
                            </a-space>
                        </div>
                        <div style="margin: 10px auto;">
                            <span>下排</span>
                            <a-space>
                                <input disabled size="mini" v-for="(item, index) in zzpzdata" :key="index"
                                    style="width: 80px;" v-model="item.belowBasin" />
                            </a-space>
                        </div>
                    </div>

                    <div style="display:flex;align-items:center;">
                        <div style="width:50%">
                            <span>裁口排针</span>
                            <a-input disabled v-model="ckpzobj.pinHeader">

                            </a-input>
                        </div>
                        <div style="width:50%">
                            <span>纱线排列</span>
                            <a-input disabled v-model="ckpzobj.arrangement">

                            </a-input>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="排三角" key="3">
                    <div v-for="(item, index) in sjdata.sj as any"
                        style="text-align: center;margin: 20px auto;width: 100%;overflow-x: auto;">
                        <div
                            style="text-align: center;color: #165DFF;font-size: 16px;background-color: aliceblue;border-bottom:0.5px solid #ccc ;">
                            {{ item.type }}
                        </div>

                        <div class="thead" style="background-color: aliceblue;">
                            <div class="th" style="width: 50px;">序号</div>
                            <div class="th" style="width:150px">用针</div>
                            <div class="th" style="width:40px" v-for="i2 in item.typeData[0].needleList" :key="i2.way">
                                {{ i2.way }}
                            </div>
                        </div>
                        <div class="tbody" v-for="i1 in item.typeData">
                            <div class="td" style="width: 50px;">{{ i1.serialNumber }}</div>
                            <div class="td" style="width: 150px;">
                                <a-input disabled v-model="i1.needleName"></a-input>
                            </div>
                            <div class="td"
                                style=" height: 34px; width: 40px; vertical-align: middle; border: 1px solid gray;"
                                v-for="i2 in i1.needleList">
                                <div style="width: 100%;height: 100%;">{{
                                    tags.filter(o => o.id
                                        === i2.needle)[0]?.val
                                }}
                                </div>
                            </div>
                        </div>
                        <div style="height:20px;"></div>
                        <div style="height:20px ;"></div>
                        <div style="border: 1px solid #ccc;"></div>
                    </div>
                    <div class="tbody" style="margin-top: 10px;">
                        <div
                            style="text-align: center;color: #165DFF;font-size: 16px;background-color: aliceblue;border-bottom:0.5px solid #ccc ;">
                            排纱
                        </div>
                        <div class="trow" style="background-color: aliceblue;">

                            <div
                                style="height: 30px;display: inline-block;width: 82px;vertical-align: top;box-sizing: border-box;">
                            </div>
                            <div
                                style="height: 30px;display: inline-block;width: 82px;vertical-align: top;box-sizing: border-box;">
                            </div>
                        </div>
                        <div class="trow" v-for="(item, index) in psList">
                            <div style="border: 1px solid #ccc;height: 30px;box-sizing: border-box;"
                                v-for="(item1, index1) in item">
                                <input v-model="item1.val"
                                    v-if="!((index > 0 && (index1 == 0 || index1 == 1)) || (index == 0 && index1 === 2))"
                                    style="width: 80px;vertical-align: top;height: 100%;text-align: center;"
                                    :class="{ 'active': (index1 == 0 || index1 == 1) }" />
                                <div v-if="((index > 0 && (index1 == 0 || index1 == 1)) || (index == 0 && index1 === 2))"
                                    style="width: 80px;vertical-align: top;height: 100%;text-align: center;"
                                    :class="{ 'active': (index1 == 0 || index1 == 1) }">{{ item1.val }}</div>
                            </div>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="关联商品" key="4">
                    <a-table stripe :bordered="{ cell: true }" :columns="sptablecol" size="mini" :data="sptablecolData"
                        :pagination="false">
                    </a-table>
                </a-tab-pane>
            </a-tabs>
        </a-drawer>
        <a-modal v-model:visible="visible" ok-text="打印" @ok="print" :width="900">
            <template #title>
                机台织造生产通知单
            </template>
            <div id="process">
                <div class="jfS">佛山市巨丰盛布业有限公司</div>
                <div class="jfSzz">织造工艺单</div>
                <table class="isTable">
                    <tr>
                        <td :style="{ width: '100px' }">订单号</td>
                        <td :style="{ width: '150px' }">{{ prinDys.planOrderCode }}</td>
                        <td :style="{ width: '100px' }">客户名称</td>
                        <td :style="{ width: '150px' }">{{ prinDys.customName }}</td>
                        <td :style="{ width: '100px' }">客户订单号</td>
                        <td colspan="3" :style="{ width: '150px' }"></td>
                    </tr>
                    <tr>
                        <td :style="{ width: '100px' }">布号</td>
                        <td :style="{ width: '150px' }">{{ prinDys.greyCode }}</td>
                        <td :style="{ width: '100px' }">品名</td>
                        <td colspan="5" :style="{ width: '350px' }">{{ prinDys.greyName }}</td>

                    </tr>
                    <tr>
                        <td :style="{ width: '100px' }">设备名称</td>
                        <td :style="{ width: '150px' }">{{ prinDys.machineName }}</td>
                        <td :style="{ width: '100px' }">台机</td>
                        <td :style="{ width: '100px' }">{{ prinDys.machineCode }}</td>
                        <td :style="{ width: '100px' }">下机门幅</td>
                        <td :style="{ width: '100px' }"></td>
                        <td :style="{ width: '100px' }">下机克重</td>
                        <td :style="{ width: '100px' }">{{ prinDys.machineGWeight }}</td>
                    </tr>
                    <tr>
                        <td :style="{ width: '100px' }">总针数</td>
                        <td :style="{ width: '150px' }">{{ prinDys.sumNeedleCount }}</td>
                        <td :style="{ width: '100px' }">开机路数</td>
                        <td :style="{ width: '100px' }">{{ prinDys.alwaysGoes }}</td>
                        <td :style="{ width: '100px' }">光坯门幅(cm)</td>
                        <td :style="{ width: '100px' }"></td>
                        <td :style="{ width: '100px' }">光坯克重(g/m²)</td>
                        <td :style="{ width: '100px' }"></td>
                    </tr>
                    <tr>
                        <td :style="{ width: '100px' }">车速</td>
                        <td :style="{ width: '150px' }">{{ prinDys.machineSpeed }}</td>
                        <td :style="{ width: '100px' }">转数/公斤</td>
                        <td :style="{ width: '100px' }">{{ prinDys.la }}</td>
                        <td :style="{ width: '100px' }">要求门幅(cm)</td>
                        <td :style="{ width: '100px' }">{{ prinDys.finishedLimit }}</td>
                        <td :style="{ width: '100px' }">要求克重(g/m²)</td>
                        <td :style="{ width: '100px' }">{{ prinDys.finishedWeight }}</td>
                    </tr>
                    <tr>
                        <td :style="{ width: '100px' }">是否抽针</td>
                        <td :style="{ width: '150px' }">{{ prinDys.drawnNeedleState == 0 ? '抽针' : '圆筒' }}</td>
                        <td :style="{ width: '100px' }">是否洗水</td>
                        <td :style="{ width: '150px' }"></td>
                        <td :style="{ width: '100px' }">染色</td>
                        <td colspan="3" :style="{ width: '150px' }"></td>
                    </tr>
                    <tr>
                        <td :style="{ width: '100px' }">针筒/机台</td>
                        <td :style="{ width: '150px' }">{{ prinDys.wm }}</td>
                        <td :style="{ width: '100px' }">计划重量</td>
                        <td :style="{ width: '150px' }">{{ prinDys.orderWeight }}</td>
                        <td :style="{ width: '100px' }">备注</td>
                        <td colspan="3" :style="{ width: '150px' }">{{ prinDys.remark }}</td>
                    </tr>
                    <tr>
                        <td colspan="4" :style="{ height: '500px' }"></td>
                        <td colspan="4" :style="{ height: '500px' }"></td>
                    </tr>
                    <tr>
                        <td :style="{ width: '100px' }">纱支编号</td>
                        <td :style="{ width: '100px' }">纱织名称</td>
                        <td :style="{ width: '100px' }">纱织比例</td>
                        <td :style="{ width: '100px' }">供应商</td>
                        <td :style="{ width: '100px' }">产地</td>
                        <td :style="{ width: '100px' }">批次</td>
                        <td :style="{ width: '100px' }">色号</td>
                        <td :style="{ width: '100px' }">色称</td>
                    </tr>
                    <tr v-for="item in prinDys.raw">
                        <td :style="{ width: '100px' }">{{ item.rawmaterialCode }}</td>
                        <td :style="{ width: '100px' }">{{ item.rawmaterialName }}</td>
                        <td :style="{ width: '100px' }">{{ item.yarnProportion }}</td>
                        <td :style="{ width: '100px' }">{{ item.customName }}</td>
                        <td :style="{ width: '100px' }"></td>
                        <td :style="{ width: '100px' }">{{ item.batch }}</td>
                        <td :style="{ width: '100px' }">{{ item.colorCode }}</td>
                        <td :style="{ width: '100px' }">{{ item.colorName }}</td>
                    </tr>
                </table>
            </div>
        </a-modal>
    </pageTabelLayout>
</template>
<script lang='ts' setup>
import { number } from 'echarts/core';
import { reactive, toRefs, ref } from 'vue'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import { post } from '@/api/http'
import { url } from 'inspector';

import { Message, Modal } from '@arco-design/web-vue';
import { IconDoubleUp, IconDoubleDown } from '@arco-design/web-vue/es/icon';
import { localeText } from '@/api/aggridZw'
import printJS from 'print-js'
const localeText1: any = ref(localeText)
import usePermission from '@/store/modules/permission'
import { pagingList } from '@/api/paging'
const pagingList1: any = ref(pagingList)
const permissionStore = usePermission()

const queryData: any = reactive({
    planTechnologyCode: "",
    schedulCode: "",
    greyCode: "",
    greyName: ""
});
const headerShow = ref<boolean>(true)
function doRefresh() {
    queryData.pageLoading = true
    post({
        url: '/planSingle/PlanTechnology/getPage',
        data: {
            page: pagination.page,
            size: pagination.pageSize,
            planTechnologyCode: queryData.planTechnologyCode,
            schedulCode: queryData.schedulCode,
            greyCode: queryData.greyCode,
            greyName: queryData.greyName
        }
    }).then(({ data, code }: any) => {
        if (code === 200) {
            table.handleSuccess(data.list);
            // pagination.setTotalSize(data.total);
            gridOption.value.setRowData(data.list);
            total.value = data.total;
        }
    })
        .catch(console.log).finally(() => {
            queryData.pageLoading = false
        })
}
const total = ref(10);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    pagination.page = val
    doRefresh();
}
function change1(val: any) {
    pagination.pageSize = val
    doRefresh();
}
const cx = () => {
    pagination.page = 1
    doRefresh()
}

const dyBf = () => {

}


const table = useTable()

const pagination = usePagination(doRefresh)


const tableColumns = useTableColumn([
    {
        title: "工艺单号",
        key: "planTechnologyCode",
        dataIndex: "planTechnologyCode",
        width: 150
    },
    {
        title: "车间",
        key: "workshop",
        dataIndex: "workshop",
        width: 150
    },
    {
        title: "排产号",
        key: "schedulCode",
        dataIndex: "schedulCode",
        width: 150
    },
    {
        title: "重量",
        key: "alreadyWeight",
        dataIndex: "alreadyWeight",
        width: 150
    },
    {
        title: "机台号",
        key: "machineCode",
        dataIndex: "machineCode",
        width: 150
    },
    {
        title: "计划单号",
        key: "planOrderCode",
        dataIndex: "planOrderCode",
        width: 150
    },
    {
        title: "计划单重量",
        key: "orderWeight",
        dataIndex: "orderWeight",
        width: 150
    },
    {
        title: "坯布编号",
        key: "greyCode",
        dataIndex: "greyCode",
        width: 150
    },
    {
        title: "坯布名称",
        key: "greyName",
        dataIndex: "greyName",
        width: 150
    },
    {
        title: "针筒",
        key: "workDrum",
        dataIndex: "workDrum",
        width: 150
    },
    {
        title: "门幅",
        key: "width",
        dataIndex: "width",
        width: 150
    },
    {
        title: "克重",
        key: "weight",
        dataIndex: "weight",
        width: 150
    },
    {
        title: "纱长",
        key: "yarnLong",
        dataIndex: "yarnLong",
        width: 150
    },
    {
        title: "颜色",
        key: "colorName",
        dataIndex: "colorName",
        width: 150
    },
    {
        title: "创建人",
        key: "createName",
        dataIndex: "createName",
        width: 150
    },

    {
        title: "创建时间",
        key: "createTime",
        dataIndex: "createTime",
        width: 150
    },
    {
        title: "修改人",
        key: "updateName",
        dataIndex: "updateName",
        width: 200
    },
    {
        title: "修改时间",
        key: "updateTime",
        dataIndex: "updateTime",
        width: 150
    },
    {
        title: "操作",
        key: "id",
        dataIndex: "id",
        slotName: "action",
        width: 150, fixed: 'right'
    },
])

let tc: any = tableColumns.map((o) => {

    let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed']
    }
    if (o.slotName === 'action') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 80
        obj['cellRenderer'] =
        {
            template: `<el-button style="color:#165dff;" v-if="e" link @click="a">修改</el-button>`,
            setup(props: any) {
                const a = () => {
                    editHandler(props.params.data)
                }
                return {
                    a,
                    e: permissionStore.hasPermisson('gyd.xg')
                }
            }

        }
    }
    if (o.slotName === 'obsoleteState') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj["width"] = 100
        obj['cellRenderer'] = 'isdou'


    }

    return obj
})

let a = [{
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    //lockPosition: "left",
}]
tc = a.concat(tc)

const dataList = ref('1')
// 表格准备事件
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
}
const huiche = () => {
    doRefresh();
}

const editHandler = (e: any) => {
    post({
        url: 'planSingle/PlanTechnology/getList',
        data: {
            id: e.id
        }
    }).then((res: any) => {
        if (res.code == 200) {
            for (let i in dataFormsz) {
                dataFormsz[i] = res.data[0][i]
            }
            for (let i in dataFormszs) {
                dataFormszs[i] = res.data[0][i]
            }
            post(
                {
                    url: 'product/pdGreyInformation/selectpdGreyInformation',
                    data: {
                        greyCode: res.data[0].greyCode
                    }
                }
            ).then(({ code, data, message }) => {
                if (code == 200) {
                    let ids: any;
                    ids = data[0].id
                    post({
                        url: 'product/pdGreyInformation/select',
                        data: {
                            id: ids
                        }
                    }).then(({ data, code, message }) => {
                        if (code == 200) {
                            dataYuls.value = data.yarnStructures
                            // 组织排针 数据
                            zzpzdata.value = data.organizationPinSons.length == 0 ? [{
                                "upBasin": "",
                                belowBasin: "",
                                id: "",
                                pdOrganizationPinId: ''
                            }] : data.organizationPinSons;
                            // 裁口排针
                            if (data.cuttingMouthNeedleGrey != null) {
                                let cuttingMouthNeedleGrey = data.cuttingMouthNeedleGrey
                                ckpzobj.id = cuttingMouthNeedleGrey.id;
                                ckpzobj.pinHeader = cuttingMouthNeedleGrey.pinHeader;
                                ckpzobj.arrangement = cuttingMouthNeedleGrey.arrangement;
                            }
                            // 排三角arrangementTriangleGreys
                            sjdata.sj = data.arrangementTriangleGreys.info
                            // sjdata.sjid=data.arrangementTriangleGreys.greyId
                            // psjpb.value=data.arrangementTriangleGreys.greyId 现有坯布
                            sjdata.atCode = data.arrangementTriangleGreys.atCode
                            sjdata.atName = data.arrangementTriangleGreys.atName
                            sjdata.remark = data.arrangementTriangleGreys.remark
                            psList.value = data.atOther

                            // 关联商品
                            sptablecolData.value = data.commodities
                            gyList.showAdd = true
                        } else {
                            Message.error(message)
                        }
                    })
                } else {
                    Message.error(message)
                }
            })
        } else {
            Message.error(res.message)
        }
    })
}

const dataFormsz: any = reactive({
    planTechnologyCode: '',
    schedulCode: '',
    alreadyWeight: '',
    planOrderCode: '',
    orderWeight: '',
    greyCode: '',
    greyName: '',
    width: '',
    weight: '',
    workshop: '',
    machineCode: '',
    id: null
})

const machineList: any = ref([])

const dataFormszs: any = reactive({
    machineSpeed: '',
    compete: '',
    greyGlue: '',
    greyTension: '',
    clothRackWidth: '',
    needleHigh: '',
    machineGWeight: '',
    washGWeight: '',
    washSeal: '',
    furHigh: '',
    yarnTension: '',
    workDrum: '',
    beadJuggle: '',
    sumNeedleCount: '',
    densityCPI: '',
    densityWPI: '',
    yarnLong: '',
    needleType: ''
})

const gyList = reactive({
    showAdd: false
})

const formRefs = ref()

const gydOk = () => {
    formRefs.value?.validate().then((err: any) => {
        if (!err) {

            post({
                url: 'planSingle/PlanTechnology/update',
                data: {
                    ...dataFormsz,
                    ...dataFormszs
                }
            }).then((res: any) => {
                if (res.code == 200) {
                    Message.success('成功')
                    for (let i in dataFormszs) {
                        dataFormszs[i] = ''
                    }
                    for (let i in dataFormsz) {
                        dataFormsz[i] = ''
                    }
                    gyList.showAdd = false
                    doRefresh()
                } else {
                    Message.error(res.message)
                }
            })
        }
    })

}

const gydNo = () => {
    gyList.showAdd = false
}

const columns = useTableColumn([
    {
        title: "用纱代码",
        key: "yarnSource",
        dataIndex: "yarnSource",
        width: 150,
        slotName: 'yarnSource'
    },
    {
        title: "原料编号",
        key: "yarnCode",
        dataIndex: "yarnCode",
        width: 150
    },
    {
        title: "原料名称",
        key: "staple",
        dataIndex: "staple",
        width: 150
    },
    {
        title: "原料类别",
        key: "yarnKind",
        dataIndex: "yarnKind",
        width: 150
    },
    {
        title: "原料属性",
        key: "stockNature",
        dataIndex: "stockNature",
        width: 150
    }, {
        title: "纱支",
        key: "yarnCount",
        dataIndex: "yarnCount",
        width: 150
    },
    {
        title: "纱支类型",
        key: "yarnType",
        dataIndex: "yarnType",
        width: 150

    },
    {
        title: "丹尼尔系数",
        key: "danielCoefficient",
        dataIndex: "danielCoefficient",
        width: 150

    },
    {
        title: "纱支比例(%)",
        key: "yarnCountProportion",
        dataIndex: "yarnCountProportion",
        width: 150,
        slotName: 'yarnCountProportion'

    },
    {
        title: "实测纱比(%)",
        key: "actualYarn",
        dataIndex: "actualYarn",
        width: 150,
        slotName: 'actualYarn'
    },
    {
        title: "织布损",
        key: "weavingDamage",
        dataIndex: "weavingDamage",
        width: 150,
        slotName: 'weavingDamage'
    },
    {
        title: "颜色组号",
        key: "colorGroup",
        dataIndex: "colorGroup",
        width: 150,
        slotName: 'colorGroup'
    },
    {
        title: "循环间距",
        key: "circularSpacing",
        dataIndex: "circularSpacing",
        width: 150,
        slotName: "circularSpacing"
    },
    // {
    //     title: "间距比",
    //     key: "gapRatio",
    //     dataIndex: "gapRatio",
    //     width: 150,
    //     slotName: "gapRatio"
    // },
    {
        title: "纱长",
        key: "yarnLong",
        dataIndex: "yarnLong",
        width: 150,
        slotName: "yarnLong"
    },
]);


const dataYuls: any = ref([])

const zzpzdata = ref<any>()
const sjdata: any = reactive<{ sj: any[] }>({ sj: [] })
let psList = ref<any[]>([])
const ckpzobj = reactive({
    id: 0,
    pinHeader: '',
    arrangement: ''
})
const tags = [{ id: '1', val: '̶' }, { id: '2', val: "Ո" }, { id: '3', val: 'Ս' }, { id: '4', val: 'Ʌ' }, {
    id: '5',
    val: 'V'
}]

let isDatasShuju: any = reactive({
    grey: [{}],
    planOrderRawmaterials: [{}],
    machineStandard: [{}]
})

const sptablecolData: any = ref([])

const sptablecol: any = [{
    dataIndex: 'commodityCode',
    key: 'commodityCode',
    title: '商品编码'
}, {
    dataIndex: 'commodityName',
    key: 'commodityName',
    title: '商品名称'
}, {
    dataIndex: 'brandName',
    key: 'brandName',
    title: '品牌'
}, {
    dataIndex: 'colorType',
    key: 'colorType',
    title: '染色类型'
},
{
    dataIndex: 'merceryName',
    key: 'merceryName',
    title: '布料名称'
},
{
    dataIndex: 'productType',
    key: 'productType',
    title: '产品类型'
}]

const dels = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选');
        return
    }
    Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        draggable: true,
        onOk() {
            post({
                url: '/planSingle/PlanTechnology/delete',
                data: gridOption.value.getSelectedRows().map((o: any) => { return o.id })
            }).then(({ code, message }: any) => {
                if (code === 200) {
                    Message.success({
                        content: '删除成功',
                        duration: 5000
                    })
                    pagination.page = 1
                    doRefresh()
                } else {
                    Message.error({
                        content: message,
                        duration: 5000
                    })
                }

            }).finally(() => {
            })
        }
    })
}

const printGys = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选');
        return
    } else if (gridOption.value.getSelectedRows().length > 1) {
        Message.error('请勿勾选多条');
        return
    } else {
        post({
            url: 'planSingle/PlanTechnology/getPrintInfo',
            data: gridOption.value.getSelectedRows()[0]
        }).then((res: any) => {
            if (res.code == 200) {
                post({
                    url: 'planSingle/PlanTechnology/printShippingData',
                    data: res.data,
                    responseType: 'blob'
                }).then((zzx: any) => {
                    let reader = new FileReader();
                    reader.readAsDataURL(zzx);
                    reader.onload = function () {
                        let pdfBase64 = reader.result.replace('data:application/pdf;base64,', '');
                        printJS({ printable: pdfBase64, type: 'pdf', base64: true })
                    };
                })
                // prinDys.value = res.data
                // visible.value = true
                // console.log(prinDys.value)
            } else {
                Message.error(res.message)
            }
        })

    }
}

const prinDys: any = ref({})

const print = () => {
    printJS({
        printable: 'process',
        type: 'html',
        targetStyles: ['*'],
    })
}
const visible = ref(false)
</script>
<style lang='less' scoped>
.fromTitle {
    width: 100%;
    background-color: white;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    form {
        width: 50% !important;
    }

    &>.my-header {
        width: 100%;
        padding: 10px;
        padding-top: 0;
        background-color: white;


        min-height: 10%;

        &>.my-tool-bar {
            width: 100%;
            text-align: right;
        }
    }
}


.fromTitle1 {
    margin-left: 50px;
    margin-top: 60px;
}

.cssToolbar {
    text-align: right;
    margin-bottom: 2px;
}

.isZbous {
    width: 750px;
    margin-left: 15px;
    margin: 0;
    padding: 0;
    margin: 0 auto;

    .isZbouss {
        width: 80%;
        margin-left: 30%;
        font-size: 18px;
        font-weight: 600;
    }

    .isZbouss1 {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 600;
    }

    .isZbouss2 {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 600;
    }
}

// #dysssss{
//     zoom:0.8;
// }
.isTable {
    width: 100%;
    height: 750px;
    margin: 0 auto;
    border: 1.2px solid #000;
    text-align: center;
    border-collapse: collapse;

    tr {
        height: 10px;
    }

    td {
        border: 1.2px solid #ccc;
    }
}

.jfS {
    width: 100%;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.jfSzz {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.isTable1 {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;
    margin-top: 20px;

    td {
        border: 1.2px solid #ccc;
    }

    .isTrTdNo {
        td {
            border-top: 1.2px solid #fff;
            border-right: 1.2px solid #fff;
            border-left: 1.2px solid #fff;
            color: #fff;
            opacity: 0;
        }
    }
}

.footer {
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    text-align: left;
}

.gyYaoqiu {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin: 0 auto;
    border-bottom: 1.2px solid #ccc;
    border-left: 1.2px solid #ccc;
    border-right: 1.2px solid #ccc;
}


.thead {
    white-space: nowrap;
    justify-content: center;

    .th {
        box-sizing: border-box;
        text-align: center;
        display: inline-block;
    }

    width: 100%;
    text-align: left;
}

.tbody {
    white-space: nowrap;
    justify-content: center;

    .td {
        text-align: center;
        box-sizing: border-box;
        display: inline-block;
    }

    text-align: left;
}

.trow>div {
    display: inline-block;
    text-align: center;
}

.active {
    width: 80px !important;

}

.gyYaoqius {
    width: 100%;
    margin: 0 auto;
    border-bottom: 1.2px solid #ccc;
    border-left: 1.2px solid #ccc;
    border-right: 1.2px solid #ccc;
}

.trTds {
    font-size: 16px;
    font-weight: 600;
}

.footers {
    width: 100%;
    margin: 0 auto;

    div {
        display: flex;
        justify-content: space-between;
        font-size: 16px;

    }
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>